<template>
  <div>
    <page-container>
      <el-form label-width="auto" class="max-w-[600px]">
        <el-form-item label="项目名称" required>
          <el-select v-model="projectId" class="w-260px!" placeholder="请选择项目">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <div class="text-12px color-999">
            如果没有您需要的项目类型，请点击“<el-link
              style="vertical-align: baseline"
              type="primary"
              @click="applyProject"
              >这里</el-link
            >”提交申请
          </div>
        </el-form-item>
        <el-form-item label="图片" required>
          <div>
            <image-picker :width="100" :ratio="NaN" />
            <div class="color-999">支持图片jpg png格式，建议尺寸750*422或16:9，小于2M，最多上传3张</div>
          </div>
        </el-form-item>
        <el-form-item label="最低起订时长" required>
          <el-select v-model="projectId" class="w-260px!" placeholder="请选择最低起订时长">
            <el-option v-for="item in 10" :key="item" :label="item" :value="item" />
          </el-select>
          <span class="ml-5px text-14px">分钟</span>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="projectId" class="w-260px!" placeholder="请选择标签">
            <el-option v-for="item in tagList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-link type="primary" class="ml-5px text-14px!" @click="tagManageDialog = true">管理</el-link>
        </el-form-item>
        <el-form-item label="营业时间" required>
          <el-radio-group v-model="time_type" class="mb_10">
            <el-radio :label="0">统一时间</el-radio>
            <el-radio :label="1">根据周几设置不同营业时间</el-radio>
          </el-radio-group>
          <div v-if="time_type == 0" class="flex items-center gap-10px mt-10px">
            <el-select
              v-model="startTime"
              class="inp_mx"
              placeholder="开始时间"
              filterable
              @blur="startTime = checkTime($event.target.value, timeList, startTime)"
            >
              <!--  -->
              <el-option v-for="item in timeList" :key="item" :label="item" :value="item" />
            </el-select>
            <span>至</span>
            <el-select
              v-model="endTime"
              class="inp_mx"
              placeholder="结束时间"
              filterable
              @blur="endTime = checkTime($event.target.value, timeList, endTime)"
            >
              <!-- @change="endChange" -->
              <!-- @blur="timeBlur($event, 'exeIntervalEndTime')" -->
              <el-option v-for="item in timeList" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div v-else class="time_interval_box">
            <div v-for="(item, index) in timeInterval" :key="index" class="time_interval">
              <div class="top">
                <div>时段{{ index + 1 }}</div>
                <el-link type="primary" @click="delTime(index)">删除</el-link>
              </div>
              <div class="mid">
                <span>日期范围</span>
                <el-checkbox-group v-model="item.weeks">
                  <el-checkbox v-for="(item1, index1) in weekList" :key="index1" :label="item1.value">{{
                    item1.label
                  }}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="bottom">
                <span>时间范围</span>
                <div class="flex gap-10px">
                  <el-select
                    v-model="item.start_time"
                    class="w-200px!"
                    placeholder="开始时间"
                    filterable
                    @blur="timeBlur($event, index, 'start_time')"
                  >
                    <!-- @change="endTimeChange(item, index)" -->
                    <el-option v-for="item2 in timeList" :key="item2" :label="item2" :value="item2" />
                  </el-select>
                  <span>至</span>
                  <el-select
                    v-model="item.end_time"
                    class="w-200px!"
                    placeholder="结束时间"
                    filterable
                    @blur="timeBlur($event, index, 'end_time')"
                  >
                    <!-- @change="endTimeChange(item, index)" -->
                    <el-option v-for="item2 in timeList" :key="item2" :label="item2" :value="item2" />
                  </el-select>
                </div>
              </div>
            </div>
            <div class="add_time" @click="addTime">
              <svg-icon icon-class="add" class="fs_14" />
              添加时段
            </div>
          </div>
        </el-form-item>
        <el-form-item label="场地介绍">
          <ImageTextMixing />
        </el-form-item>
      </el-form>
      <el-dialog title="管理标签" v-model="tagManageDialog" width="500px">
        <div class="pt-10px pb-10px">
          <el-table :data="tagListShow">
            <el-table-column prop="label" label="标签">
              <template #default="scope">
                <el-input v-if="scope.row.isNew" v-model="scope.row.label" class="w-200px!" placeholder="请输入" />
                <span v-else class="tag_name">{{ scope.row.label }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="管理" width="100px">
              <template #default="scope">
                <el-button type="text" @click="handleDeleteTag(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <template #footer>
          <div class="center">
            <el-button type="primary" class="px32" plain @click="handleAddTag">添加</el-button>
            <el-button type="primary" class="px32" @click="handleAddTagSure">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </page-container>
  </div>
</template>

<script lang="ts" setup>
import { checkTime } from '@/utils/utils'
defineOptions({ name: 'GroundProjectCreateUpdate' })
const projectId = ref('')
const projectList = ref([
  {
    name: '项目一',
    id: '1',
  },
])
// 标签相关开始
interface Tag {
  label: string
  value: string
}
interface AddTag {
  label: string
  isNew: Boolean
  index: number
}
const tagList = ref<Tag[]>([
  {
    label: '标签一',
    value: '1',
  },
  {
    label: '标签二',
    value: '2',
  },
  {
    label: '标签三',
    value: '3',
  },
  {
    label: '标签四',
    value: '4',
  },
])
const tagManageDialog = ref(false)
const tagListShow = computed(() => {
  return [...tagList.value, ...addTagList.value]
})
const addTagList = ref<AddTag[]>([])
const handleDeleteTag = (index: Number, val: string) => {}
const handleAddTag = () => {
  if (addTagList.value.some(item => !item.label)) {
    ElMessage.error('请输入标签名')
    return
  }
  addTagList.value.push({
    label: '',
    isNew: true,
    index: addTagList.value.length,
  })
}
const handleAddTagSure = () => {}
// 标签相关结束
const time_type = ref(0)
const startTime = ref('')
const endTime = ref('')
const timeList = [
  '08:00',
  '08:30',
  // 往后写
  '09:00',
  '09:30',
  '10:00',
  '10:30',
  '11:00',
  '11:30',
]
const timeInterval = ref([
  {
    weeks: [1, 2, 3, 4, 5],
    start_time: '',
    end_time: '',
  },
  {
    weeks: [6, 7],
    start_time: '',
    end_time: '',
  },
])
const weekList = [
  {
    label: '周一',
    value: 1,
  },
  {
    label: '周二',
    value: 2,
  },
  {
    label: '周三',
    value: 3,
  },
  {
    label: '周四',
    value: 4,
  },
  {
    label: '周五',
    value: 5,
  },
  {
    label: '周六',
    value: 6,
  },
  {
    label: '周日',
    value: 7,
  },
]
const timeBlur = (e: any, index: number, type: string) => {
  if (type === 'start_time') {
    timeInterval.value[index].start_time = checkTime(e.target.value, timeList, timeInterval.value[index].start_time)
  } else if (type === 'end_time') {
    timeInterval.value[index].end_time = checkTime(e.target.value, timeList, timeInterval.value[index].end_time)
  }
}
const delTime = (idx: number) => {}
const addTime = () => {}
const applyProject = () => {}
</script>

<style scoped lang="scss">
.time_interval_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .time_interval {
    width: 550px;
    background: #f6f7f9;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    ::v-deep .el-checkbox {
      margin-right: 10px;
    }
    .top {
      display: flex;
      justify-content: space-between;
    }
    .mid,
    .bottom {
      display: flex;
      gap: 15px;
      align-items: center;
    }
  }
  .add_time {
    width: 550px;
    background: #f6f7f9;
    border-radius: 4px;
    padding: 10px;
    color: $main-color;
    cursor: pointer;
  }
}
</style>
